::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } .checker-bg { background-color: #0f172a; background-image: linear-gradient(45deg, #1e293b 25%, transparent 25%), linear-gradient(-45deg, #1e293b 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1e293b 75%), linear-gradient(-45deg, transparent 75%, #1e293b 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0px; } /* Marker-specific range sliders */ input[type="range"] { -webkit-appearance: none; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.4); cursor: pointer; transition: transform 0.1s; } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); } input[type="color"] { -webkit-appearance: none; border: none; width: 28px; height: 28px; border-radius: 50%; padding: 0; cursor: pointer; background: transparent; } input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); } .tool-btn { transition: all 0.2s ease; border: 1px solid transparent; } .tool-btn.active { background-color: rgba(14, 165, 233, 0.2); /* Sky blue active state */ border-color: rgba(14, 165, 233, 0.5); color: #38bdf8; } .tool-btn:hover:not(.active) { background-color: rgba(255, 255, 255, 0.05); } #scale-wrapper { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0px; } #p5-container canvas { box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 30px 60px -12px rgba(0,0,0,0.8); transform-origin: center center; will-change: transform; border-radius: 8px; cursor: crosshair; }

MarkerForge Pro

Playing Sequence